import { Line } from '@ant-design/charts';

interface LearnRecord {
    id: number;
    progress: number;
    score: number | null;
    completionTime: string | null;
    easyType: number | null;
    remark: string | null;
    workId: number;
}

interface Props {
    learnRecords: LearnRecord[];
}

const CompletionTimeAnalysis: React.FC<Props> = ({ learnRecords }) => {
    const dailyData = learnRecords.reduce((prev, curr) => {
        if (!curr.completionTime) {
            return prev;
        }

        const date = curr.completionTime.substr(0, 10);
        prev[date] = (prev[date] || 0) + 1;
        return prev;
    }, {} as Record<string, number>);

    const data = Object.entries(dailyData).map(([time, count]) => ({
        time,
        count,
    }));

    return (
        <Line
            data={data}
            xField="time"
            yField="count"
            height={400}
        />
    );
};

export default CompletionTimeAnalysis;